<template>
  <div id="app">
    <div class="editprofile">
      <!--  <div class="header">
        <span class="iconfont iconjiantou2"></span>
        <h4>编辑用户资料</h4>
        <span></span>
      </div> -->
      <!-- 头部 -->
      <myheader>
        <template #left>
          <van-icon name="arrow-left" @click="$router.go(-1)" />
        </template>
        <template #center>
          <span>个人信息编辑</span>
        </template>
        <template #right>
          <van-icon name="wap-home-o" @click.native="jump" />
        </template>
      </myheader>

      <!-- 头像 -->
      <!--  <div class="head">
        <img
          alt=""
          src="http://localhost:3000/uploads/image/IMG1570927791226.jpeg"
        />
        <div class="uploader van-uploader">
          <div class="van-uploader__wrapper">
            <div class="van-uploader__upload">
              <i class="van-icon van-icon-plus van-uploader__upload-icon"></i
              ><input
                type="file"
                accept="image/*"
                class="van-uploader__input"
              />
            </div>
          </div>
        </div>
      </div> -->

      <div class="head_img">
        <img :src="detail.head_img" alt="" />
        <van-uploader :after-read="afterRead" />
      </div>

      <!-- 详细信息 @click.native因为点击的是子组件 使用native可以调用原生事件点击子组件  -->
      <mycell
        title="昵称"
        :desc="detail.nickname"
        @click.native="nickNameShow = true"
      ></mycell>
      <van-dialog
        v-model="nickNameShow"
        title="标题"
        show-cancel-button
        @confirm="upnickName"
        @cancel="nickName = detail.nickname"
      >
        <van-field
          v-model="nickName"
          label="昵称"
          required
          placeholder="请输入用户名"
        />
      </van-dialog>

      <!--密码-->
      <mycell
        title="密码"
        desc="******"
        @click.native="password = true"
      ></mycell>
      <van-dialog
        v-model="password"
        title="密码"
        show-cancel-button
        @confirm="upPassword"
        @cancel="originPass = newPass = ''"
        :before-close="beforeClose"
      >
        <van-field
          v-model="originPass"
          label="原密码"
          required
          placeholder="请输入原密码"
        />
        <van-field
          v-model="newPass"
          label="新密码"
          required
          placeholder="请输入新密码"
        />
      </van-dialog>
      <!--性别-->
      <mycell
        title="性别"
        :desc="detail.gender == 1 ? '男' : '女'"
        @click.native="show = true"
      ></mycell>
      <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
      <!---->
    </div>
  </div>
</template>

<script>
import mycell from "@/components/mycell";
import { userDetail, userUploader } from "@/api/user.js";
import myheader from "@/components/myheader";
import axios from "@/utils/request.js";
import { uploadFile } from "@/api/fileUploader.js";
export default {
  data() {
    return {
      detail: {},
      nickNameShow: false,
      password: false,
      nickName: "",
      originPass: "", //原密码
      newPass: "", //新密码
      show: false,
      actions: [{ name: "男" }, { name: "女" }],
    };
  },
  components: {
    mycell,
    myheader,
  },
  mounted() {
    let id = this.$route.params.id;
    //console.log(id);
    userDetail(id)
      .then((res) => {
        console.log(res);
        this.detail = res.data.data;
        this.detail.head_img = this.detail.head_img
          ? axios.defaults.baseURL + this.detail.head_img
          : "http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg";
        this.nickName = this.detail.nickname;
      })
      .catch((err) => {
        this.$toast.success(res.data.message);
      });
  },
  methods: {
    //跳转首页
    jump() {
      this.$router.push({ name: "index" });
    },

    //密码修改不正确模态框不消失
    beforeClose(action, done) {
      //console.log(action);
      if (action == "confirm") {
        if (
          this.detail.password != this.originPass ||
          this.newPass.trim().length < 3
        ) {
          done(false);
        } else {
          done();
        }
      } else {
        done();
      }
    },

    //上传昵称
    upnickName() {
      userUploader(this.detail.id, { nickname: this.nickName })
        .then((res) => {
          console.log(res);
          if (res.data.message === "修改成功") {
            // 更新页面中的数据展示
            this.detail.nickname = this.nickName;
            // console.log(this.detail.nickname);
            this.$toast.success("用户昵称编辑成功");
          } else {
            this.$toast.fail("用户昵称编辑失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //修改密码
    upPassword() {
      //判断输入原密码是否正确
      if (this.detail.password == this.originPass) {
        if (this.newPass.trim().length >= 3) {
          userUploader(this.detail.id, { password: this.newPass })
            .then((res) => {
              console.log(res);
              if (res.data.message === "修改成功") {
                this.$toast.success("用户密码编辑成功");
                this.detail.password == this.newPass;
                // console.log("vvv", this.detail.password);

                this.originPass = this.newPass = "";
              } else {
                this.$toast.fail("用户密码编辑失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$toast.fail("请输入三位及以上的新密码");
        }
      } else {
        this.$toast.fail("原密码输入错误");
      }
    },

    /* 上传文件 */
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file.file);
      //收集用户传入的文件
      let format = new FormData();
      format.append("file", file.file);
      uploadFile(format)
        .then((res) => {
          console.log(res);
          if (res.data.message == "文件上传成功") {
            this.detail.head_img = axios.defaults.baseURL + res.data.data.url;
            //更新用户数据
            userUploader(this.detail.id, { head_img: res.data.data.url })
              .then((res) => {
                //console.log(res);
                this.$toast.success(res.data.message);
              })
              .catch((err) => {
                this.$toast.success(res.data.message);
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //性别修改
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      let gender = item.name == "男" ? 1 : 0;
      //console.log(gender);

      userUploader(this.detail.id, { gender })
        .then((res) => {
          console.log(res);
          if (res.data.message === "修改成功") {
            // 更新页面中的数据展示
            this.detail.gender = gender;
            // console.log(this.detail.nickname);
            this.$toast.success("编辑成功");
          } else {
            this.$toast.fail("编辑失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });

      this.show = false;
      this.$toast(item.name);
    },
  },
};
</script>

<style lang="less" scoped>
.head_img {
  margin: 15px 0;
  display: flex;
  justify-content: center;
  img {
    width: 90/360 * 100vw;
    height: 90/360 * 100vw;
    display: block;
  }
  .van-uploader {
    position: absolute;
    opacity: 0;
  }
  /deep/.van-uploader__upload {
    width: 100 / 360 * 100vw;
    height: 100 / 360 * 100vw;
  }
  /deep/.van-picker-column__item {
    border-top: 1px red sloid;
    border-bottom: 1px red sloid;
  }
}
</style>